<template>
    <div>
      <div style="margin-top: 15px; margin-bottom: 20px">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-input placeholder="请输入内容" v-model="permId" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
            
          </el-col>
          <el-col :span="8">
            <el-button type="success" @click="add">新增</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table :data="tableData" style="width: 100%" max-height="100%">
        <el-table-column fixed prop="id" label="id" width="150">
        </el-table-column>
        <el-table-column prop="name" label="name" width="120">
        </el-table-column>
        <el-table-column prop="code" label="code" width="220">
        </el-table-column>
        <el-table-column prop="link" label="link" width="220">
        </el-table-column>
        <el-table-column prop="type" label="type" width="220">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="50"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="editRow(scope)"
              type="primary"
              size="small"
            >
              编辑
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope)"
              type="danger"
              size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增和编辑公用的弹窗 -->
      <el-dialog
        :title="title"
        :visible.sync="centerDialogVisible"
        width="35%"
        center
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="角色名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="code">
            <el-input v-model="form.code"   type="textarea" :row="3"></el-input>
          </el-form-item>
          <el-form-item label="type">
            <el-input v-model="form.type"   type="textarea" :row="3"></el-input>
          </el-form-item>
          <el-form-item label="link">
            <el-input v-model="form.link"   type="textarea" :row="3"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              style="display: block; margin-top: 9px"
              v-model="form.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="激活"
              inactive-text="禁用"
              active-value="Y"
              inactive-value="N"
            >
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 引入分页组件 -->
      <Pagenation style="margin-top: 20px" />
    </div>
  </template>
  
  <script>
    import Pagenation from "../../components/pagenation/index.vue";
    export default {
      data() {
        return {
          permId:'',
          title: "",
          tableData: [],
          centerDialogVisible: false,
          //新增和编辑存放数据的地方
          form: {
            id: 0,
            name: "",
            code: "",
            link: "",
            code: "",
            status: "Y",
          },
        };
      },
      components: { Pagenation },
      //生命周期的钩子函数，通常调用方法，来获取后台的数据
      created() {
        //在页面打开的时候，直接去调用方法，来获取页面初始列表数据
        this.iniPageData();
      },
      methods: {
        iniPageData() {
          this.$axios("/rbacPerm/")
            .then((res) => {
              console.log(res);
              this.tableData = res.data.data;
            })
            .catch();
        },
        deleteRow(scope) {
          console.log(scope.row);
          this.$axios
            .delete("/rbacPerm/" + scope.row.id)
            .then((res) => {
              if (res.data.code == 200) {
                this.$notify({
                  title: "成功",
                  message: res.data.msg,
                  type: "success",
                });
                this.iniPageData();
              } else {
                this.$notify.error({
                  title: "错误",
                  message: "这是一条错误的提示消息",
                });
              }
            })
            .catch((err) => {
              //浏览器请求报错，后台响应状态码是200以外的
            });
          // rows.splice(index, 1);
        },
        //新增 并弹窗，同时还要赋值
        add() {
          this.title = "新增";
          //清空上次提交的数据
          this.form.id=0;
          this.form.name = "";
          this.form.description = "";
          //显示弹窗
          this.centerDialogVisible = true;
        },
        //新增点击保存按钮后 发送请求到后台
        onSubmit() {
          //保存的时候 如何判断是新增还是编辑？
          if (this.title == "新增") {
            this.$axios
              .post("/rbacPerm/", this.form)
              .then((res) => {
                console.log(res);
                if (res.data.code == 500) {
                  this.$message.error(res.data.msg);
                } else {
                  this.$message({
                    message: res.data.msg,
                    type: "success",
                  });
                  this.iniPageData(); //重新初始化表单数据
                  this.centerDialogVisible = false; //要隐藏弹窗
                }
              })
              .catch();
          } else {
            this.$axios
              .put("/rbacPerm/", this.form)
              .then((res) => {
                if (res.data.code == 500) {
                  this.$message.error(res.data.msg);
                } else {
                  this.$message({
                    message: res.data.msg,
                    type: "success",
                  });
                  this.iniPageData(); //重新初始化表单数据
                  this.centerDialogVisible = false; //要隐藏弹窗
                }
              })
              .catch();
          }
        },
        editRow(scope) {
          this.title = "编辑";
          let rows = scope.row;
          this.form.id = rows.id;
          this.form.name = rows.name;
          this.form.code = rows.code;
          this.form.type = rows.type;
          this.form.link = rows.link;
          this.form.status = rows.status;
          //让弹窗显示
          this.centerDialogVisible = true;
        },
        search(){
          this.$axios.get("/rbacPerm/"+this.permId).then(res=>{
            console.log(res);
            if(res.data.code==200){
              this.tableData=[]//这里的置空，只是因为我确定搜索的内容只有一条！
              //正常开发的时候，搜索功能，返回的一定是List数组，可以直接this.tableData=res.data.data
              this.tableData.push(res.data.data)
            }
          }).catch();
        }
      },
    };
  </script>